<template>
  <div class="video-container1">
    <video ref="welcomeVideo" autoplay muted>
      <source src="@/assets/img/intro.mp4" type="video/mp4" />
    </video>
    <button v-if="showButton" @click="enterHomepage" class="enter-button move-to-center">
      进入主页
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const showButton = ref(false);
const welcomeVideo = ref<HTMLVideoElement | null>(null);
const router = useRouter();

onMounted(() => {
  if (welcomeVideo.value) {
    welcomeVideo.value.addEventListener('ended', () => {
      showButton.value = true;
    });
  }
});

const enterHomepage = () => {
  router.push({ path: '/home' });
};
</script>

<style scoped>
.enter-button {
  position: absolute;
  top: 80%;
  left: 0;
  padding: 10px 20px;
  font-size: 28px;
  background-color: rgba(150, 150, 150, 0.3);
  cursor: pointer;
  width: 180px;
  font-family: '华文行楷';
  transform: translateX(-100%);
  color: ghostwhite;
  border-width: 2px;
  border-style: solid;
  border-color: white;
  border-image: initial;
  border-radius: 40px;
  transition: background-color 0.3s ease 0s;
  animation: moveToCenter 2s forwards;
}

.video-container1 {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

button:hover {
  background-color: rgba(50, 50, 50, 0.3);
}

.enter-button.hidden {
  display: none;
}

@keyframes moveToCenter {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
